<template>
  <view class="health-files">
    <!-- 基本信息卡片 -->
    <view class="card basic-info">
      <view class="card-header">
        <text class="title">基本信息</text>
        <text class="edit" @tap="editBasicInfo">编辑</text>
      </view>
      <view class="card-content">
        <view class="info-item">
          <text class="label">姓名</text>
          <text class="value">{{ basicInfo.name || '未填写' }}</text>
        </view>
        <view class="info-item">
          <text class="label">性别</text>
          <text class="value">{{ basicInfo.gender || '未填写' }}</text>
        </view>
        <view class="info-item">
          <text class="label">年龄</text>
          <text class="value">{{ basicInfo.age || '未填写' }}</text>
        </view>
        <view class="info-item">
          <text class="label">身高</text>
          <text class="value">{{ basicInfo.height ? basicInfo.height + 'cm' : '未填写' }}</text>
        </view>
        <view class="info-item">
          <text class="label">体重</text>
          <text class="value">{{ basicInfo.weight ? basicInfo.weight + 'kg' : '未填写' }}</text>
        </view>
      </view>
    </view>

    <!-- 病史记录卡片 -->
    <view class="card medical-history">
      <view class="card-header">
        <text class="title">病史记录</text>
        <text class="edit" @tap="addMedicalHistory">添加</text>
      </view>
      <view class="card-content">
        <view 
          class="history-item"
          v-for="(item, index) in medicalHistory"
          :key="index"
          @tap="viewHistoryDetail(item)"
        >
          <view class="main-info">
            <text class="disease">{{ item.disease }}</text>
            <text class="time">{{ item.time }}</text>
          </view>
          <text class="hospital">{{ item.hospital }}</text>
          <text class="status">{{ item.status }}</text>
        </view>
        <view class="empty" v-if="medicalHistory.length === 0">
          <text>暂无病史记录</text>
        </view>
      </view>
    </view>

    <!-- 体检报告卡片 -->
    <view class="card checkup-reports">
      <view class="card-header">
        <text class="title">体检报告</text>
        <text class="edit" @tap="viewAllReports">查看全部</text>
      </view>
      <view class="card-content">
        <view 
          class="report-item"
          v-for="(report, index) in checkupReports"
          :key="index"
          @tap="viewReportDetail(report)"
        >
          <view class="report-info">
            <text class="name">{{ report.name }}</text>
            <text class="time">{{ report.time }}</text>
          </view>
          <text class="hospital">{{ report.hospital }}</text>
        </view>
        <view class="empty" v-if="checkupReports.length === 0">
          <text>暂无体检报告</text>
        </view>
      </view>
    </view>

    <!-- 用药记录卡片 -->
    <view class="card medication-records">
      <view class="card-header">
        <text class="title">用药记录</text>
        <text class="edit" @tap="addMedication">添加</text>
      </view>
      <view class="card-content">
        <view 
          class="medication-item"
          v-for="(medication, index) in medications"
          :key="index"
          @tap="viewMedicationDetail(medication)"
        >
          <view class="medication-info">
            <text class="name">{{ medication.name }}</text>
            <text class="time">{{ medication.time }}</text>
          </view>
          <text class="dosage">{{ medication.dosage }}</text>
          <text class="frequency">{{ medication.frequency }}</text>
        </view>
        <view class="empty" v-if="medications.length === 0">
          <text>暂无用药记录</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      basicInfo: {
        name: '',
        gender: '',
        age: '',
        height: '',
        weight: ''
      },
      medicalHistory: [
        {
          disease: '感冒',
          time: '2024-03-01',
          hospital: '仁爱医院',
          status: '已康复'
        }
      ],
      checkupReports: [
        {
          name: '年度体检',
          time: '2024-02-15',
          hospital: '仁爱医院'
        }
      ],
      medications: [
        {
          name: '布洛芬',
          time: '2024-03-01',
          dosage: '200mg',
          frequency: '每日3次'
        }
      ]
    }
  },

  onShow() {
    this.loadHealthFiles()
  },

  methods: {
    async loadHealthFiles() {
      try {
        // TODO: 替换为实际的API调用
        // const res = await api.getHealthFiles()
        // this.basicInfo = res.basicInfo
        // this.medicalHistory = res.medicalHistory
        // this.checkupReports = res.checkupReports
        // this.medications = res.medications
      } catch (error) {
        console.error('加载健康档案失败:', error)
        uni.showToast({
          title: '加载失败',
          icon: 'none'
        })
      }
    },

    editBasicInfo() {
      // TODO: 跳转到编辑基本信息页面
      uni.showToast({
        title: '编辑功能开发中',
        icon: 'none'
      })
    },

    addMedicalHistory() {
      // TODO: 跳转到添加病史页面
      uni.showToast({
        title: '添加功能开发中',
        icon: 'none'
      })
    },

    viewHistoryDetail(item) {
      // TODO: 查看病史详情
      uni.showToast({
        title: '详情功能开发中',
        icon: 'none'
      })
    },

    viewAllReports() {
      // TODO: 查看所有体检报告
      uni.showToast({
        title: '查看功能开发中',
        icon: 'none'
      })
    },

    viewReportDetail(report) {
      // TODO: 查看体检报告详情
      uni.showToast({
        title: '详情功能开发中',
        icon: 'none'
      })
    },

    addMedication() {
      // TODO: 添加用药记录
      uni.showToast({
        title: '添加功能开发中',
        icon: 'none'
      })
    },

    viewMedicationDetail(medication) {
      // TODO: 查看用药详情
      uni.showToast({
        title: '详情功能开发中',
        icon: 'none'
      })
    }
  }
}
</script>

<style lang="scss">
.health-files {
  min-height: 100vh;
  background: #f5f5f5;
  padding: 20rpx;

  .card {
    background: #fff;
    border-radius: 12rpx;
    margin-bottom: 20rpx;
    overflow: hidden;
    
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20rpx;
      border-bottom: 1rpx solid #f5f5f5;
      
      .title {
        font-size: 32rpx;
        color: #333;
        font-weight: bold;
      }
      
      .edit {
        font-size: 26rpx;
        color: #007AFF;
      }
    }
    
    .card-content {
      padding: 20rpx;
    }
  }

  .basic-info {
    .info-item {
      display: flex;
      align-items: center;
      margin-bottom: 20rpx;
      
      &:last-child {
        margin-bottom: 0;
      }
      
      .label {
        width: 120rpx;
        font-size: 28rpx;
        color: #666;
      }
      
      .value {
        flex: 1;
        font-size: 28rpx;
        color: #333;
      }
    }
  }

  .medical-history {
    .history-item {
      padding: 20rpx 0;
      border-bottom: 1rpx solid #f5f5f5;
      
      &:last-child {
        border-bottom: none;
      }
      
      .main-info {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10rpx;
        
        .disease {
          font-size: 28rpx;
          color: #333;
          font-weight: bold;
        }
        
        .time {
          font-size: 24rpx;
          color: #999;
        }
      }
      
      .hospital {
        font-size: 26rpx;
        color: #666;
        margin-bottom: 10rpx;
        display: block;
      }
      
      .status {
        font-size: 24rpx;
        color: #007AFF;
      }
    }
  }

  .checkup-reports {
    .report-item {
      padding: 20rpx 0;
      border-bottom: 1rpx solid #f5f5f5;
      
      &:last-child {
        border-bottom: none;
      }
      
      .report-info {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10rpx;
        
        .name {
          font-size: 28rpx;
          color: #333;
          font-weight: bold;
        }
        
        .time {
          font-size: 24rpx;
          color: #999;
        }
      }
      
      .hospital {
        font-size: 26rpx;
        color: #666;
      }
    }
  }

  .medication-records {
    .medication-item {
      padding: 20rpx 0;
      border-bottom: 1rpx solid #f5f5f5;
      
      &:last-child {
        border-bottom: none;
      }
      
      .medication-info {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10rpx;
        
        .name {
          font-size: 28rpx;
          color: #333;
          font-weight: bold;
        }
        
        .time {
          font-size: 24rpx;
          color: #999;
        }
      }
      
      .dosage {
        font-size: 26rpx;
        color: #666;
        margin-bottom: 10rpx;
        display: block;
      }
      
      .frequency {
        font-size: 24rpx;
        color: #007AFF;
      }
    }
  }

  .empty {
    text-align: center;
    padding: 40rpx 0;
    
    text {
      font-size: 26rpx;
      color: #999;
    }
  }
}
</style> 